<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历优化 - InterviewAI</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 动态背景 -->
    <div class="bg-animation">
        <div class="floating-shape"></div>
        <div class="floating-shape"></div>
        <div class="floating-shape"></div>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <a href="index.html" class="navbar-brand">InterviewAI</a>
            
            <ul class="navbar-nav">
                <li><a href="index.html">控制台</a></li>
                <li><a href="resume.html" class="active">简历优化</a></li>
                <li><a href="interview.html">面试模拟</a></li>
                <li><a href="profile.html">成长报告</a></li>
            </ul>
            
            <div class="navbar-actions">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索功能、模板...">
                    <span class="search-icon">🔍</span>
                </div>
                
                <button class="theme-toggle" onclick="toggleTheme()" title="切换主题">
                    <span class="icon">🌙</span>
                </button>
                
                <button class="icon-btn">
                    <span>🔔</span>
                    <span class="notification-badge"></span>
                </button>
                
                <div class="user-avatar">A</div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="main-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">AI简历优化</h1>
            <p class="page-subtitle">智能分析 · 专业建议 · 完美简历</p>
            <div class="page-meta">当前评分: <span class="info-badge success">88分</span></div>
        </div>

        <!-- 双栏布局 -->
        <div class="two-column">
            <!-- 编辑区域 -->
            <div class="column">
                <div class="column-header">
                    <h2 class="column-title">编辑区域</h2>
                    <div style="display: flex; gap: 8px;">
                        <button class="btn btn-secondary" onclick="showMessage('AI优化功能开发中', 'info')">AI优化</button>
                        <button class="btn" onclick="showMessage('简历已保存', 'success')">保存</button>
                    </div>
                </div>

                <form id="resume-form">
                    <!-- 基本信息 -->
                    <div class="card">
                        <h3 class="card-title">基本信息</h3>
                        
                        <div class="form-group">
                            <label class="form-label">姓名 *</label>
                            <input type="text" class="form-input" name="name" value="张三" required>
                        </div>
                        
                        <div class="grid grid-2">
                            <div class="form-group">
                                <label class="form-label">手机号 *</label>
                                <input type="tel" class="form-input" name="phone" value="138********" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">邮箱 *</label>
                                <input type="email" class="form-input" name="email" value="zhang@example.com" required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">求职意向</label>
                            <input type="text" class="form-input" name="position" value="Java开发工程师" placeholder="如：Java开发工程师">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">个人简介</label>
                            <textarea class="form-textarea" name="summary" rows="4" placeholder="请简要介绍您的专业技能和工作经验...">5年Java开发经验，熟悉Spring Boot、微服务架构，具备大型项目开发经验。</textarea>
                        </div>
                    </div>

                    <!-- 工作经历 -->
                    <div class="card">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                            <h3 class="card-title" style="margin-bottom: 0;">工作经历</h3>
                            <button type="button" class="btn btn-text" data-action="add" data-type="experience">+ 添加经历</button>
                        </div>
                        
                        <div id="work-experience-list">
                            <div class="experience-item" style="background: var(--bg-glass); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem;">
                                <div class="grid grid-2">
                                    <div class="form-group">
                                        <label class="form-label">公司名称</label>
                                        <input type="text" class="form-input" name="company" value="阿里巴巴集团">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">职位</label>
                                        <input type="text" class="form-input" name="position" value="高级Java开发工程师">
                                    </div>
                                </div>
                                
                                <div class="grid grid-2">
                                    <div class="form-group">
                                        <label class="form-label">开始时间</label>
                                        <input type="month" class="form-input" name="start_date" value="2021-03">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">结束时间</label>
                                        <input type="month" class="form-input" name="end_date" value="2024-06">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">工作描述</label>
                                    <textarea class="form-textarea" name="description" rows="3">负责电商平台核心业务模块开发，参与微服务架构设计与实现，优化系统性能提升30%。</textarea>
                                </div>
                                
                                <button type="button" class="btn btn-text" data-action="delete" style="color: var(--error);">删除</button>
                            </div>
                        </div>
                    </div>

                    <!-- 项目经验 -->
                    <div class="card">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
                            <h3 class="card-title" style="margin-bottom: 0;">项目经验</h3>
                            <button type="button" class="btn btn-text" data-action="add" data-type="project">+ 添加项目</button>
                        </div>
                        
                        <div id="project-list">
                            <div class="project-item" style="background: var(--bg-glass); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem;">
                                <div class="form-group">
                                    <label class="form-label">项目名称</label>
                                    <input type="text" class="form-input" name="project_name" value="电商平台后端系统">
                                </div>
                                
                                <div class="grid grid-2">
                                    <div class="form-group">
                                        <label class="form-label">项目时间</label>
                                        <input type="text" class="form-input" name="project_time" value="2022.01-2023.12">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">项目角色</label>
                                        <input type="text" class="form-input" name="project_role" value="核心开发">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">技术栈</label>
                                    <input type="text" class="form-input" name="tech_stack" value="Spring Boot, Redis, MySQL, Docker">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">项目描述</label>
                                    <textarea class="form-textarea" name="project_desc" rows="3">基于Spring Boot构建的大型电商平台，支持百万级用户并发，采用微服务架构和分布式缓存。</textarea>
                                </div>
                                
                                <button type="button" class="btn btn-text" data-action="delete" style="color: var(--error);">删除</button>
                            </div>
                        </div>
                    </div>

                    <!-- 教育背景 -->
                    <div class="card">
                        <h3 class="card-title">教育背景</h3>
                        
                        <div class="grid grid-2">
                            <div class="form-group">
                                <label class="form-label">学校名称</label>
                                <input type="text" class="form-input" name="school" value="北京理工大学">
                            </div>
                            <div class="form-group">
                                <label class="form-label">专业</label>
                                <input type="text" class="form-input" name="major" value="计算机科学与技术">
                            </div>
                        </div>
                        
                        <div class="grid grid-2">
                            <div class="form-group">
                                <label class="form-label">学历</label>
                                <select class="form-input" name="degree">
                                    <option value="本科" selected>本科</option>
                                    <option value="硕士">硕士</option>
                                    <option value="博士">博士</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">毕业时间</label>
                                <input type="month" class="form-input" name="graduation" value="2019-06">
                            </div>
                        </div>
                    </div>

                    <!-- 技能专长 -->
                    <div class="card">
                        <h3 class="card-title">技能专长</h3>
                        
                        <div class="form-group">
                            <label class="form-label">专业技能</label>
                            <textarea class="form-textarea" name="skills" rows="4" placeholder="请列出您的专业技能...">• Java开发：Spring Boot, Spring Cloud, MyBatis
• 数据库：MySQL, Redis, MongoDB
• 中间件：RabbitMQ, Kafka, Elasticsearch
• 开发工具：Git, Docker, Kubernetes</textarea>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div style="display: flex; gap: 16px; justify-content: center; margin-top: 24px;">
                        <button type="button" class="btn btn-secondary" onclick="performAIOptimization()">AI优化</button>
                        <button type="submit" class="btn">保存简历</button>
                        <button type="button" class="btn" onclick="exportToPDF()">导出PDF</button>
                    </div>
                </form>
            </div>

            <!-- 预览区域 -->
            <div class="column">
                <div class="column-header">
                    <h2 class="column-title">预览区域</h2>
                    <div class="info-badge">实时预览</div>
                </div>

                <!-- 模板选择器 -->
                <div class="template-selector-preview" style="margin-bottom: 16px; padding: 16px; background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);">
                    <div style="margin-bottom: 12px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px;">
                        <span>🎨</span>
                        <span>选择简历模板</span>
                    </div>
                    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                        <button class="template-btn" data-template="modern">
                            <span style="margin-right: 4px;">✨</span>
                            现代简约
                        </button>
                        <button class="template-btn" data-template="classic">
                            <span style="margin-right: 4px;">💼</span>
                            商务经典
                        </button>
                        <button class="template-btn" data-template="tech">
                            <span style="margin-right: 4px;">💻</span>
                            专业技术
                        </button>
                    </div>
                </div>

                <div id="resume-preview" style="background: white; padding: 24px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; line-height: 1.6;">
                    <!-- 简历预览内容 -->
                    <div style="text-align: center; margin-bottom: 24px; border-bottom: 2px solid var(--primary); padding-bottom: 16px;">
                        <h1 style="margin: 0 0 8px 0; color: var(--primary);">张三</h1>
                        <div style="color: #6b7280;">Java开发工程师</div>
                        <div style="margin-top: 8px; color: #6b7280;">
                            📱 138******** | 📧 zhang@example.com
                        </div>
                    </div>

                    <!-- 个人简介 -->
                    <div style="margin-bottom: 24px;">
                        <h3 style="color: var(--primary); margin-bottom: 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">个人简介</h3>
                        <p style="margin: 0; color: #374151;">
                            5年Java开发经验，熟悉Spring Boot、微服务架构，具备大型项目开发经验。
                        </p>
                    </div>

                    <!-- 工作经历 -->
                    <div style="margin-bottom: 24px;">
                        <h3 style="color: var(--primary); margin-bottom: 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">工作经历</h3>
                        <div style="margin-bottom: 16px;">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                <strong>高级Java开发工程师 - 阿里巴巴集团</strong>
                                <span style="color: #6b7280;">2021.03 - 2024.06</span>
                            </div>
                            <p style="margin: 0; color: #374151;">
                                负责电商平台核心业务模块开发，参与微服务架构设计与实现，优化系统性能提升30%。
                            </p>
                        </div>
                    </div>

                    <!-- 项目经验 -->
                    <div style="margin-bottom: 24px;">
                        <h3 style="color: var(--primary); margin-bottom: 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">项目经验</h3>
                        <div style="margin-bottom: 16px;">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                <strong>电商平台后端系统</strong>
                                <span style="color: #6b7280;">2022.01-2023.12</span>
                            </div>
                            <div style="margin-bottom: 4px; color: #6b7280;">
                                技术栈: Spring Boot, Redis, MySQL, Docker
                            </div>
                            <p style="margin: 0; color: #374151;">
                                基于Spring Boot构建的大型电商平台，支持百万级用户并发，采用微服务架构和分布式缓存。
                            </p>
                        </div>
                    </div>

                    <!-- 教育背景 -->
                    <div style="margin-bottom: 24px;">
                        <h3 style="color: var(--primary); margin-bottom: 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">教育背景</h3>
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <strong>北京理工大学</strong>
                                <span style="color: #6b7280; margin-left: 8px;">本科 | 计算机科学与技术</span>
                            </div>
                            <span style="color: #6b7280;">2019.06毕业</span>
                        </div>
                    </div>

                    <!-- 技能专长 -->
                    <div>
                        <h3 style="color: var(--primary); margin-bottom: 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">技能专长</h3>
                        <div style="color: #374151; white-space: pre-line;">• Java开发：Spring Boot, Spring Cloud, MyBatis
• 数据库：MySQL, Redis, MongoDB
• 中间件：RabbitMQ, Kafka, Elasticsearch
• 开发工具：Git, Docker, Kubernetes</div>
                    </div>
                </div>

                <!-- AI分析建议 -->
                <div class="feedback-tip" style="margin-top: 16px;">
                    <span class="tip-icon">🤖</span>
                    <div class="tip-content">
                        <h3>AI分析建议</h3>
                        <ul style="margin: 0; padding-left: 20px;">
                            <li>正在分析简历内容...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html> 